<template>
    <div>

      <el-card>
          <!--查询添加-->
            <el-row>
              <el-col :span="8">
                <el-input placeholder="请输入内容" clearable v-model="queryInfo.queryString" class="input-with-select" @clear="findPage">
                  <el-button slot="append" icon="el-icon-search" @click="findPage"/>
                </el-input>
              </el-col>
              <el-col :span="2">
                <el-button style="margin-left: 10px" @click="insert"  type="primary">添加信息</el-button>
              </el-col>
            </el-row>
          <!--列表-->
        <el-table :data="tableList" stripe  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  row-key="id" >
              <el-table-column prop="path" label="路径" width="180"/>
              <el-table-column prop="icon" label="图标" width="180"/>
              <el-table-column prop="title" label="标题" width="180"/>
              <el-table-column prop="component" label="前端组件" width="180"/>
                <el-table-column label="是否启用">
                  <template slot-scope="scope" >
                    <el-switch @change="updateStatus(scope.row)"  v-model="scope.row.status" />
                  </template>
                </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" @click="update(scope.row) "  size="small" icon="el-icon-edit" circle/>
              <el-button type="danger" @click="deleteById(scope.row.id)" size="small"  icon="el-icon-delete" circle/>
            </template>
          </el-table-column>
        </el-table>
          <!--底部分页条-->
        <el-pagination
          @size-change="handlePageSize"
          @current-change="handlePageNumber"
          :current-page="currentPage4"
          :page-sizes="[7, 25, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"/>

           <!--弹框-->
        <el-dialog :title="title" :visible.sync="open1" width="30%" @close="clickCancel">
          <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">

            <el-form-item label="是否是子级菜单" v-if="isChildrenMenu">
                 <el-checkbox v-model="isChildrenMenu" style="margin-left: -90%" :disabled="disMenuSelect"/>
            </el-form-item>
            <el-form-item label="父级菜单" prop="parentId" v-if="isChildrenMenu">
                  <el-select v-model="form.parentId" placeholder="请选择" style="width: 100%">
                      <el-option
                        v-for="(item,index) in parentList"
                        :key="index"
                        :label="item.title"
                        :value="item.id"
                        :disabled="!item.status">
                      </el-option>
                  </el-select>
            </el-form-item>

            <el-form-item label="路径" prop="path">
              <el-input v-model="form.path" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <e-icon-picker v-model="form.icon"/>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"  />
            </el-form-item>
            <el-form-item label="前端组件" prop="component">
              <el-input v-model="form.component"  />
            </el-form-item>
            <el-form-item label="是否启用" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="clickCancel">取 消</el-button>
            <el-button type="primary" @click="clickOk">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
export default {
  data(){
    return{
      queryInfo: {
        //页码
        pageNumber: 1,
        //页数
        pageSize: 7,
        //关键字
        queryString: ""
      },
      //表格数据
      tableList:[],
      //总记录数
      total: 0,
      currentPage4: 1,
      //弹窗标题
      title: null,
      //是否打开会话框
      open1: false,
      //表单数据
      form: {},
      //父级菜单列表
      parentList:[],
      //是否为子级菜单
      isChildrenMenu: true,
        
        disMenuSelect: false,
      //表单校验
      rules:{
          parentId:[
              { required: true, message: '请选择父级菜单', trigger: 'change' },
          ],
          path:[
              { required: true, message: '请输入菜单路径', trigger: 'blur' },
              {min:1 , max: 100, message: "权限标签值的长度为1~100",trigger: 'blur'}
          ],
          icon:[
              { required: true, message: '请输入菜单图标路径', trigger: 'change' },
          ],
          title:[
              { required: true, message: '请输入菜单标题', trigger: 'blur' },
              {min:1 , max: 50, message: "权限标签值的长度为1~50",trigger: 'blur'}
          ],
          component:[
              { required: true, message: '请输入菜单前端组件', trigger: 'blur' },
              {min:1 , max: 50, message: "权限标签值的长度为1~50",trigger: 'blur'}
          ],
          status:[
              {required: true, message: '请选择是否启用', trigger: 'change' },
          ]

      }
    }
  },
  methods:{

    findParent(){
        this.$ajax.get("/menu/findParent").then((res)=>{
          this.parentList = res.data.data;
        });
    },

    findPage(){
      this.$ajax.post("/menu/findPage", this.queryInfo).then((res)=>{
        this.tableList = res.data.rows;
          console.log('返回的数据',this.tableList);
        this.total = res.data.total;
      });
    },

    //页面改变事件
    handlePageNumber(newPageNumber){
      //将分页的新数据的参数传递给后端查询
      this.queryInfo.pageNumber = newPageNumber;
      //调分页方法
      this.findPage();
    },

    handlePageSize(newPageSize){
      this.queryInfo.pageSize = newPageSize;
      this.findPage();
    },

    /* 改变权限数据的状态*/
    updateStatus(row){
      this.$ajax.put('/permission/update',row).then((res)=>{
        this.$message.success("状态更新成功！")
      })
    },

    insert(){
      this.title = "添加菜单";
      this.open1 = true;
    },
    update(row){
        this.title = "修改菜单";
        if (row.path === '/'){
            this.isChildrenMenu = false;
        }else {
            //禁用菜单级别的选择
            this.disMenuSelect = true;
        }
          this.form = row;
            console.log("form的内容",this.form);
          this.open1 = true;
    },
    //删除权限信息
    deleteById(id){
      this.$confirm('您将永久删除id是{' + id +' }的菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用后端删除权限接口
        this.$ajax.delete(`/menu/delete/${id}`).then(res => {
          this.$message.success(res.data.message);
          this.queryInfo.pageNumber = 1;
          this.findPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //关闭弹窗表单时刷新表单数据
    clickCancel(){
      this.form = {};
      this.isChildrenMenu = false;
      this.open1 = false;
      this.isChildrenMenu = true;
      this.disMenuSelect = false;
    },

    //提交表单要添加的菜单数据给后端
    clickOk(){
      //进行表单校验
      this.$refs.form.validate((valid) =>{
        //校验不通过
        if(!valid) return this.$message.error('表单校验不通过，请检查后提交！')

        //校验通过 判断是否是新增
        if(this.form.id === undefined || this.form.id ===null){
          this.$ajax.post("/menu/insert",this.form).then((res)=>{
            this.$message.success(res.data.message)
            this.open1 = false;
            this.findPage();
          })
        }else {
          this.$ajax.put('/menu/update',this.form).then((res)=>{
            this.$message.success(res.data.message)
            this.open1 = false;
            this.findPage();
          })
        }
      })
    },
    
  },
  created(){
    this.findPage();
    this.findParent();
  }


};
</script>

<style scoped>
    .el-radio-group{
      margin-left: -60%;
    }
</style>